<template>
    <!-- 这里是顶部显示的内容 -->
    <div class="header_con">
        <div class="header">
            <h1>手机品牌管理</h1>
            <input type="text" placeholder="请输入搜索条件" v-model="searchPhone" />
        </div>
    </div>

    <!-- 显示内容的标题部分 -->
    <div class="tb_title">
        <h3>品牌列表</h3>
        <a @click.prevent="openAddModel">新增品牌</a>
    </div>

    <!-- 显示手机列表信息 -->
    <table class="tb">
        <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创立时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item, index) in showPhoneList" :key="'phone' + index">
            <td>{{ index+ 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.date }}</td>
            <td>
                <a class="del" @click.prevent="removePhone(item.name)">删除</a>
            </td>
        </tr>
        <tr v-if="showPhoneList.length <= 0">
            <td colspan="4">没有品牌数据</td>
        </tr>
    </table>

    <!-- 新增品牌弹框 -->
    <div class="add_con" v-show="modelShowTag">
        <div class="add">
            <h3>新增品牌</h3>
            <div class="add_form">
                <label>品牌名称:</label>
                <input type="text" v-model="addPhone" />
            </div>
            <div class="btns">
                <input type="button" value="取消" @click="closeAddModel">
                <input type="button" value="添加" @click="addPhoneList">
            </div>
        </div>
        <div class="mask"></div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import moment from 'moment'
// 弹窗状态控制
const modelShowTag = ref(false)
// 新增品牌手机输入
const addPhone = ref("")
// 查询手机输入
const searchPhone = ref("")
// 手机列表
const phoneList = ref([{
    name: "小米",
    date: new Date()
}, {
    name: "大米",
    date: new Date()
}, {
    name: "红米",
    date: new Date()
}, {
    name: "华为",
    date: new Date()
}, {
    name: "苹果",
    date: new Date()
}])

// 用来显示的手机列表信息
const showPhoneList = computed(() => {
    let newArr = [];
    // 这里需要注意，我们使用的是  phoneList 因为计算属性必须依赖一个响应式数据对象
    phoneList.value.forEach(item => {
        // 现在我们还要依赖 我们 搜索输入的内容来进行监听一次
        if (item.name.indexOf(searchPhone.value) > -1) {
            newArr.push({
                ...item,
                date: moment(item.date).format('YYYY-MM-DD  HH:mm:ss a')
            })
        }
    });
    return newArr;
})

// 打开 新增手机品牌弹窗
const openAddModel = () => {
    modelShowTag.value = true
}
// 关闭 新增手机品牌弹窗
const closeAddModel = () => {
    modelShowTag.value = false
}

// 添加一个手机列表
const addPhoneList = () => {
    if (addPhone.value === "") {
        alert("手机品牌输入不允许为空！")
        return;
    }
    phoneList.value.push({
        name: addPhone.value,
        date: new Date()
    })
    addPhone.value = ""
    closeAddModel()
}

// 删除一个手机品牌
const removePhone = (name) => {
    phoneList.value = phoneList.value.filter(item => item.name !== name)
}

</script>

<style lang="scss" scoped>
body {
    margin: 0px;
}

.header_con {
    height: 60px;
    background-color: #101010;
    overflow: hidden;
}

.header {
    width: 960px;
    margin: 0px auto;
    overflow: hidden;
}

.header h1 {
    margin: 0px;
    padding: 0px;
    font-size: 22px;
    line-height: 60px;
    font-weight: normal;
    color: #f1f1f1;
    letter-spacing: 1px;
    float: left;
}

.header input {
    float: right;
    width: 240px;
    height: 30px;
    text-indent: 10px;
    border-radius: 4px;
    margin-top: 15px;
    border: 0px;
    outline: none;
}

.tb_title {
    width: 960px;
    height: 40px;
    margin: 20px auto 0;
    background-color: #3366cc;
    overflow: hidden;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.tb_title h3 {
    margin: 0px;
    padding: 0px;
    line-height: 40px;
    font-size: 16px;
    font-weight: normal;
    text-indent: 15px;
    float: left;
    color: #fff;
}

.tb_title a {
    float: right;
    text-decoration: none;
    background-color: #f3cd57;
    color: #2c2203;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    margin: 7px 15px 0 0;
}

.tb_title a:hover {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background-color: transparent;
    color: #fff;
}

.tb {
    border-collapse: collapse;
    width: 960px;
    margin: 0 auto;
}

.tb th {
    background-color: #f1f1f1;
    color: #333;
    font-size: 14px;
}

.tb td,
.tb th {
    padding: 10px 0;
    border: 1px solid #999;
    text-align: center;
}

.tb td {
    color: #666;
    font-size: 14px;
}

.del {
    text-decoration: none;
    color: #f90
}

.add {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
    width: 400px;
    height: 200px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 4px;
    z-index: 100;
}

.add h3 {
    padding: 0px;
    margin: 0px;
    background-color: #3366cc;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    line-height: 40px;
    text-indent: 15px;
}

.add_form {
    margin: 30px 0 0 50px;
}

.add_form label {
    font-size: 14px;
    padding-right: 10px;
}

.add_form input {
    width: 200px;
    height: 24px;
    border: 1px solid #ccc;
    outline: none;
    text-indent: 10px;
    border-radius: 4px;
}

.btns {
    border-top: 1px solid #ccc;
    margin-top: 50px;
    padding-right: 10px;
}

.btns input {
    width: 62px;
    height: 30px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    background-color: #fff;
    float: right;
    margin: 10px 10px 0 0;
    outline: none;
    cursor: pointer;
    ;
}

.btns input:last-child {
    background-color: #669df6;
    color: #fff;
    border-color: #5793f6;
}

.mask {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;
}
</style>